<template>
    <view class="container">
        <u-alert title="为保护你的隐私安全，证件照片仅用于实名认证" type ="error" center></u-alert>

        <view class="card">
            <view class="card_item">
                <image class="card_item_sfz" :src="(form.imageIdentityFront ? form.imageIdentityFront:'../../../pagesC/static/img/idCard-z.png')"></image>
                <view class="card_item_icon" @click="openSelectImage(1)"><u-icon name="camera-fill" size="28" color="#fff"></u-icon></view>
                <text>点击上传身份证人像面照片</text>
            </view>
            <view class="card_item">
                <image class="card_item_sfz" :src="(form.imageIdentityBack ? form.imageIdentityBack:'../../../pagesC/static/img/idCard-f.png')"></image>
                <view class="card_item_icon" @click="openSelectImage(2)"><u-icon name="camera-fill" size="28" color="#fff"></u-icon></view>
                <text>点击上传身份证国徽面照片</text>
            </view>
        </view>

        <view class="tip">
            <view class="tip_item">
                <text>请按照示例图将身份证进行拍照上传</text>
            </view>
            <view class="tip_item">
                <text>图片模糊、遮挡，光线暗不予通过</text>
            </view>
            <view class="tip_item">
                <text>请审核信息是否正确，若有误请手动更改</text>
            </view>
        </view>

         <view class="next_btn_box">
             <u-button class="next_btn" type="primary" color="#007aff" @click="handleNext">下一步</u-button>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { realname } from '@/api/qss/certification.js'
import { upLoad } from '@/api/qss/zxhapi.js'
 import { nation_list } from "@/utils/common.js"
const form = ref({
    imageIdentityFront: '', //身份证正面
    imageIdentityBack: '', //身份证反面
    education: '', //学历
    politicalStatus: '', //政治面貌
    avatar: '', //头像
})

/* 身份证选择 */
const token = uni.getStorageSync('token')
function openSelectImage(type) {
    uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
            const tempFiles = res.tempFiles[0]
             upLoad(tempFiles).then(res => {
                if(type == 1) {
                    form.value.imageIdentityFront = `${res.data.url}?Authorization=Bearer ${token}&platform=corp`
                    console.log(form.value.imageIdentityFront,'form.value.imageIdentityFront')
                } else if(type == 2) {
                    form.value.imageIdentityBack = `${res.data.url}?Authorization=Bearer ${token}&platform=corp`
                }
            })
        },
        fail: function (err) {
            console.log(err)
        },
    })
}

/* 下一步 */
function handleNext() {
    if(!form.value.imageIdentityFront || !form.value.imageIdentityBack) {
        uni.showToast({
            title: '请上传身份证照片',
            icon: 'none'
        })
        return
    }
   
    realname({
        frontUrl: form.value.imageIdentityFront,
        backUrl: form.value.imageIdentityBack,
    }).then(res => {
        if (res.code === 200 && res.data) {
            const { name, identityNumber, identityOrg, issuedTime, expiredTime, nation, age, sex, birthday, address } = res.data;
            const phone = uni.getStorageSync('phone');
            form.value = {
                ...form.value,
                name, //姓名
                identityNumber, //身份证号
                identityOrg, //签发机关
                issuedTime: formatTimestamp(issuedTime), //签发日期
                expiredTime: formatTimestamp(expiredTime), //失效日期
                nation:nationFilter(nation,1), //民族
                nationText:nationFilter(nation,2), //民族
                age, //年龄
                sex, //性别
                birthday: formatTimestamp(birthday), //出生日期
                address, //住址
                phone:form.value.type == 1? phone : '' //手机号
            };
            
            uni.setStorageSync('certificationInfo', JSON.stringify(form.value));
            uni.navigateTo({
                url: '/pagesC/certification/saveInfo/index'
            });

        } else {
            // uni.showToast({
            //     title: '认证失败，请重新上传',
            //     icon: 'none'
            // });
        }
    })
}

// 时间戳转日期
function formatTimestamp(timestamp) {
    var time = parseInt(timestamp, 10);
    // 如果时间戳是以秒为单位的，需要将其转换为毫秒
    if (timestamp.length === 10) {
        time = time * 1000;
    }
    var date = new Date(time);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    return y + '-' + m + '-' + d + ' 00:00:00';
}


//民族
function nationFilter  (value, type) {
    if (!value) return '';
    const foundItem = nation_list.find(item => 
      item.text.indexOf(value) !== -1
    );
    if (!foundItem) return '';
    return type === 1 ? foundItem.value : foundItem.text;
}
onShow(()=> {
    //获取本地存储的认证信息
    if(uni.getStorageSync('certificationInfo')) {
        form.value = JSON.parse(uni.getStorageSync('certificationInfo'))
        console.log(form.value,'form111')
    }
})

onLoad(options =>{
    console.log(options,'options')
    if(options.type) {
        form.value.type = options.type
    }
    console.log('汉族'.indexOf('汉'))
})

</script>

<style lang="scss" scoped>
@import '../../static/style/index.scss';
.container{
    width: 100%;
    .card{
        width: 100%;
        background: #fff;
        border-radius: 10rpx;
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        &_item{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 420rpx;
            background-color: #F8F8F8;
            border-radius: 10rpx;
            position: relative;
            margin-bottom: 30rpx;
            overflow: hidden;
            &_sfz{
                width: 460rpx;
                height: 304rpx;
            }
            &_icon{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100rpx;
                height: 100rpx;
                background-color: #689EFE;
                box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.23);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            text{
                position: absolute;
                font-size: 28rpx;
                color: #999999;
                bottom: 15rpx;
            }
        }
    }
    .tip{
        width: 100%;
        background: #fff;
        border-radius: 10rpx;
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        &_item{
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            text{
                font-size: 28rpx;
                color: #949494;
                margin-left: 20rpx;
            }
        }
        &_item::before{
                content: '';
                display: block;
                width: 20rpx;
                height: 20rpx;
                background-color: #D2E3FE;
                border-radius: 50%;
                margin-right: 15rpx;
            }
      
    }
    // .next_btn_box{
    //     z-index: 2;
    //     height: calc(128rpx + env(safe-area-inset-bottom));
    //     background: #FFF;
    //     box-shadow: 0px -8rpx 12rpx 0px rgba(0, 0, 0, 0.05);
    //     display: flex;
    //     align-items: center;
    //     padding: 0 30rpx env(safe-area-inset-bottom);
    //     position: fixed;
    //     bottom: 0;
    //     left: 0;
    //     width: 100%;
    //     box-sizing: border-box;
    // }
}
</style>